<!--
 * @Author: Wayne 13235388225@163.com
 * @Date: 2023-09-20 11:44:29
 * @LastEditors: Wayne 13235388225@163.com
 * @LastEditTime: 2023-10-12 09:56:13
 * @FilePath: \vue-element-admin\src\views\hotUpdate\hotUpdate.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <div class="view-title">热更新</div>
    <el-button
      type="primary"
      @click="handlerAdd"
      v-permission="['hotUpdate:add']"
      >添加</el-button
    >
    <!-- <div class="filter-container">
      <div class="filter-main">
        <div class="filter-item">
          <el-button type="primary" @click="handlerAdd">添加</el-button>
        </div>
      </div>
    </div> -->
    <!-- <div class="top_btn_box"></div> -->
    <div>
      <el-table
        :data="tableData"
        :header-cell-style="{
          borderColor: '#F0F0F0',
          height: '51px',
          background: '#F0F0F0',
          color: '#333',
        }"
        :row-style="{ height: '51px' }"
        :cell-style="{ borderColor: '#F0F0F0' }"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="id" label="id" align="center" width="100" />
        <el-table-column prop="hot_path" label="热更新路径" align="center">
          <template v-slot="{ row }">
            {{ row.hot_path ? row.hot_path : "/" }}
          </template>
        </el-table-column>
        <el-table-column prop="apk_path" label="整包更新路径" align="center">
          <template v-slot="{ row }">
            {{ row.apk_path ? row.apk_path : "/" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="version"
          label="版本号"
          align="center"
          width="100"
        />
        <el-table-column
          prop="description"
          label="描述"
          width="300"
          show-overflow-tooltip
          align="center"
        />
        <el-table-column
          prop="updated_at"
          label="上传时间"
          align="center"
          width="180"
        />
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleSwitch(scope.row)"
              v-permission="['hotUpdate:switch']"
              >切换版本</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page_box">
      <el-pagination
        :current-page="pageNow"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加弹窗 -->
    <el-dialog title="添加" :visible.sync="dialogVisible" width="30%">
      <div class="add_box">
        <div class="hot_update_btn">
          <div>
            <el-upload
              style="margin-right: 30px"
              class="upload-demo"
              :action="uploadImgUrl"
              :on-success="onSuccessFile"
              :on-error="onErrorFile"
              :data="{ type: '0' }"
              accept=".wgt"
              list-type="text"
            >
              <el-button size="small" type="primary">上传热更新包</el-button>
              <div slot="tip" class="el-upload__tip">只能上传wgt文件</div>
            </el-upload>
          </div>

          <div>
            <el-upload
              class="upload-demo"
              :action="uploadImgUrl"
              :on-success="onSuccessFile"
              :on-error="onErrorFile"
              :data="{ type: '1' }"
              accept=".apk"
              list-type="text"
            >
              <el-button size="small" type="primary">上传应用安装包</el-button>
              <div slot="tip" class="el-upload__tip">只能上传Apk文件</div>
            </el-upload>
          </div>
        </div>

        <div class="input_box">
          <div class="input_title">热更新路径</div>
          <div>
            <el-input v-model="hotUpdateValue" />
          </div>
        </div>

        <div class="input_box">
          <div class="input_title">apk路径</div>
          <div>
            <el-input v-model="apkValue" />
          </div>
        </div>

        <div class="input_box">
          <div class="input_title">版本号</div>
          <div>
            <el-input v-model="versionValue" />
          </div>
        </div>

        <div class="input_box">
          <div class="input_title">描述</div>
          <div>
            <el-input v-model="descriptionValue" />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlerCancel">取 消</el-button>
        <el-button type="primary" @click="handlerSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAppHotRefreshList,
  addAppHotRefresh,
  hotRefreshPush,
  getOrderList,
} from "@/api/user";
export default {
  data() {
    return {
      tableData: [],
      versionValue: "",
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/app/uploadFiles",
      dialogVisible: false,
      hotUpdateValue: "",
      apkValue: "",
      descriptionValue: "",
      hotUrl: "",
      apkUrl: "",
      submitId: "",
      content: "",
      pageNow: 1,
      pageSize: 10,
      total: null,
    };
  },
  created() {
    if (!localStorage.getItem("userInfo")) {
      this.$router.push("/login");
    }
  },
  mounted() {
    // this.getOrderList()
    this.getAppHotRefreshList();
  },
  methods: {
    // getOrderList() {
    //   getOrderList().then(res => {
    //   })
    // },

    // 查询热更新全部记录接口
    getAppHotRefreshList() {
      getAppHotRefreshList({
        version: this.versionValue,
        page_now: this.pageNow,
        page_size: this.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.tableData = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 添加热更新记录
    getAddAppHotRefresh() {
      const that = this;
      addAppHotRefresh({
        hot_path: this.hotUpdateValue,
        apk_path: this.apkValue,
        version: this.versionValue,
        description: this.descriptionValue,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.dialogVisible = false;
          this.getAppHotRefreshList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 发布热更新接口
    hotRefreshPush() {
      hotRefreshPush({
        id: this.submitId,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    onSuccessFile(val) {
      this.hotUpdateValue = val.data.path;
    },
    onErrorFile(val) {
      this.apkValue = val.data.path;
    },

    // 添加
    handlerAdd() {
      this.dialogVisible = true;
    },

    // 确定弹窗
    handlerSure() {
      this.getAddAppHotRefresh();
    },

    // 取消弹窗
    handlerCancel() {
      (this.hotUpdateValue = ""),
        (this.apkValue = ""),
        (this.versionValue = ""),
        (this.descriptionValue = ""),
        (this.dialogVisible = false);
    },

    // 切换
    handleSwitch(val) {
      const that = this;
      this.submitId = val.id;
      this.$confirm("是否确定切换版本?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.hotRefreshPush();
          that.getAppHotRefreshList();
        })
        .catch(() => {});
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNow = 1;
      this.getAppHotRefreshList();
    },
    handleCurrentChange(val) {
      this.pageNow = val;
      this.pageSize = 10;
      this.getAppHotRefreshList();
    },
  },
};
</script>
<style lang="scss" scoped>
.add_box {
  padding: 20px;
  .hot_update_btn {
    display: flex;
    padding-bottom: 20px;
  }

  .input_box {
    padding-bottom: 20px;

    .input_title {
      font-size: 15px;
      font-weight: 550;
      padding-bottom: 10px;
    }
  }
}
</style>
